<template>
  <ContentLoader v-if="showContent" primaryColor="#e6e6e6" class="list-loader"/>
  <div v-else class="untreated-wrapper">
    <common-scroll ref="scroll"
                  :listenScroll="listenScroll"
                  @pullingDown="handleRefresh"
                  @pullingUp="handleUpdate"
                  @scroll="handleScroll"
                  class="scroll">
      <div class="scroll-container">
      <pullrefresh-content :scroll-top="scrollTop" :refresh-content="refreshContent"></pullrefresh-content>
        <Card v-on="$listeners" v-for="(item, index) of lists" :key="item.order_no" :index="index" :infos.sync="item" />
        <load-more :isLoading="isLoading" :isMore="lists.length === Number(total) && lists.length > 0" />
        <empty :isEmpty="Number(total) === 0"/>
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonScroll from '@/components/Scroll/scroll'
import Card from '@/views/home/components/Card'
import PullrefreshContent from '@/components/PullrefreshContent'
import Empty from '@/components/empty'
import LoadMore from '@/components/loadMore'
import { ContentLoader } from 'vue-content-loader'
import { consumedList } from '@/api/consumed'
import { mapGetters } from 'vuex'
export default {
  name: 'untreated',
  components: {
    Card,
    CommonScroll,
    PullrefreshContent,
    ContentLoader,
    LoadMore,
    Empty
  },
  data () {
    return {
      scrollTop: 0,
      refreshContent: '下拉刷新...',
      showContent: true,
      isLoading: false,
      limitQuery: {
        page: 1,
        size: 10
      },
      total: 0,
      lists: []
    }
  },
  computed: {
    ...mapGetters(['isDelete', 'deleteIndex', 'subType'])
  },
  watch: {
    isDelete: {
      handler: function (status) {
        if (status) {
          this.lists.splice(this.deleteIndex, 1)
          this.total--
          this.$store.dispatch('home/setIsDelete', false)
        }
      }
    },
    subType: {
      handler: function (index) {
        console.log(index)
        if (Number(index) === 1) {
          this.lists[this.deleteIndex].status = 2
        }
      }
    }
  },
  inheritAttrs: false,
  created () {
    this.listenScroll = true
    this.getList()
    // this.pullDownRefresh = true
  },
  methods: {
    async handleUpdate () {
      const { lists, total } = this
      if (lists.length === Number(total) || this.isLoading) {
        this.$refs.scroll.finishPullUp()
        return
      }
      this.limitQuery.page++
      this.isLoading = true
      await this.getList()
      this.isLoading = false
      this.$refs.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    },
    async handleRefresh () {
      this.limitQuery.page = 1
      this.refreshContent = '加载中...'
      this.isLoading = false
      this.lists = []
      await this.getList()
      this.$store.dispatch('home/updataOrder', true)
      this.$refs.scroll.finishPullDown()
      this.$refs.scroll.refresh()
      setTimeout(() => {
        this.refreshContent = '下拉刷新...'
      }, 500)
    },
    handleScroll (pos) {
      this.scrollTop = pos.y
    },
    async getList () {
      const { page, size } = this.limitQuery
      try {
        const res = await consumedList({ page, size })
        const { list, total } = res.data
        this.lists = this.lists.concat(list)
        this.total = total
        this.showContent = false
      } catch (error) {
        this.showContent = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'
.untreated-wrapper
  .scroll
    top 340px
    padding-left 20px
    padding-right 20px
    box-sizing border-box

    .scroll-container
      min-height 100.2%
</style>
